<template>
	<view class="shareRedEnvelope">
		<view class="topBox">
			<view class="content">
				<view class="text">疯抢200元红包</view>
				<view class="text">邀请好友一起分</view>
			</view>
			<image class="topBg" src="../static/shareTopBg.png" mode="aspectFill"></image>
		</view>
		<view class="redEnvelope">
			<view class="imageBox">
				<view class="content">
					<view class="amount">￥<text class="text">{{this_hongbao_info.hongbao_amount}}</text></view>
					<view class="userList flex_space_a">
						<view class="user" v-for="(item, index) in lingqu_data_list" :key="index">
							<view class="expected">{{item.amount}}</view>
							<image v-if="item.user_nickname!=''" class="avatar" :src="item.user_headimg" mode="aspectFill"></image>
							<view class="avatar" v-if="item.user_nickname==''">
								<u-icon name="question" color="#ddd" size="32"></u-icon>
							</view>
							<view class="uName u-line-1">{{item.user_nickname}}</view>
						</view>
					</view>
					
					<view class="btnBox" v-if="this_hongbao_info.shengyu_num > 0">
						<view class="btnMask" v-if="btnMaskShow">
							<text>再邀请{{this_hongbao_info.shengyu_num || 0}}名好友就可以拆红包了</text>
							<text class="icon" @click="btnMaskShow = false">x</text>
						</view>
						<button class="btn" open-type="share">
							<u-icon name="weixin-fill" color="#9b2928" size="32"></u-icon>
							<text class="text">邀请好友一起拆红包</text>
						</button>
					</view>
					<view class="btnBox" v-if="this_hongbao_info.shengyu_num <= 0">
						<button class="btn">
							<u-icon name="weixin-fill" color="#9b2928" size="32"></u-icon>
							<text class="text">恭喜您，红包已领取</text>
						</button>
					</view>
				</view>
				<image class="redImg" src="../static/redEnvelope.png" mode="scaleToFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				this_id:0,
				this_hongbao_info:{},
				this_user_info:{},
				hongbao_amount:0,
				isShowSuccess:false,
				this_share_title:'',
				this_share_url:'',
				userList: [0, 1, 2, 3, 4],
				lingqu_data_list:[],
				btnMaskShow: true
			}
		},
		onLoad(op) {
			let _this = this;
			_this.this_id = op.id || 0;
		},
		onShow:function(){
			let _this = this;
			if(util.is_wechat_xcx_auth()){
				_this.get_index_data();
			}
		},
		onShareAppMessage() {
			return {
			  title:this.this_share_title,
			  imageUrl: '',
			  path:this.this_share_url
			}
		},
		methods: {
			get_index_data:function(){
				let _this = this;
				const param = {};
				param.id = _this.this_id;
				util.requestPost('api.php/Hongbao/index',param,function(res) {
						if(res.code == 1){
							_this.this_hongbao_info = res.data.this_hongbao_info;
							_this.this_user_info = res.data.this_user_info;
							_this.this_share_title = res.data.this_share_title;
							_this.this_share_url = res.data.this_share_url;
							_this.lingqu_data_list = res.data.lingqu_data_list;
						}else{
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel:false,
								success: function (res) {
									uni.switchTab({
										url:"/pages/index/index"
									})
								}
							});
							return;
						}
					}, true,{},true);
			},
			actionHongbao:function(){
				let _this = this;
				const param = {};
				param.id = _this.this_id;
				util.requestPost('api.php/Hongbao/actionHongbao',param,function(res) {
						_this.hongbao_amount = res.data.hongbao_amount;
						_this.isShowSuccess = true;
					}, true);
			},
			onReachBottom:function(){
				let _this = this;
				if(_this.isMore == true) _this.get_index_data();
			},
			go_home:function(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			getLoopArray (start, end) {
				let array = [];
				for (let i = start; i < end; i++) {
				  array.push(i);
				}
				return array;
			},
		},
		computed: {
			notList () {
				let length = this.userList.length;
				let number = 10 - length;
				return this.getLoopArray(0, number)
			}
		}
	}
</script>

<style scoped lang="scss">
.shareRedEnvelope {
	min-height: 100%;
	background-color: #f55733;
	.topBox {
		position: relative;
		.content {
			position: relative;
			z-index: 2;
			text-align: center;
			padding: 41rpx 0;
			.text {
				color: #FFFFFF;
				font-size: 68rpx;
				font-weight: bold;
				letter-spacing: 16rpx;
				text-shadow: 0 4rpx 8rpx #fe0000;
			}
		}
		.topBg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			width: 750rpx;
			height: 260rpx;
		}
	}
	.redEnvelope {
		height: calc(100vh - 260rpx);
		position: relative;
		.imageBox {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			.content {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 650rpx;
				// .topText {
				// 	width: 560rpx;
				// 	padding: 28rpx 0 0;
				// 	text-align: center;
				// 	font-size: 60rpx;
				// 	color: #f7cd67;
				// 	margin: 280rpx auto 0;
				// }
				// .avatar {
				// 	width: 120rpx;
				// 	height: 120rpx;
				// 	border: 2rpx solid #FFFFFF;
				// 	border-radius: 50%;
				// 	position: absolute;
				// 	top: 50rpx;
				// 	left: 50%;
				// 	transform: translateX(-50%);
				// }
				// .nickname{
				// 	position: absolute;
				// 	top: 180rpx;
				// 	left: 50%;
				// 	color:#ffffff;
				// 	transform: translateX(-50%);
				// }
				// .btn {
				// 	width: 160rpx;
				// 	height: 160rpx;
				// 	display: block;
				// 	margin: 280rpx auto 0;
				// 	animation: btn 2s linear infinite;
				// }
				// .bottomText {
				// 	width: 560rpx;
				// 	padding: 48rpx 0 0;
				// 	text-align: center;
				// 	font-size: 28rpx;
				// 	color: #f7cd67;
				// }
				text-align: center;
				.amount {
					margin-top: 20rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #f7cd67;
					.text {
						font-size: 68rpx;
					}
				}
				.userList {
					flex-wrap: wrap;
					margin-top: 82rpx;
					.user {
						width: 25%;
						position: relative;
						margin-bottom: 92rpx;
						.expected {
							position: absolute;
							top: -50rpx;
							left: 50%;
							transform: translateX(-50%);
							background-color: #FFFFFF;
							border: 1rpx solid #9b2928;
							border-radius: 40rpx;
							font-size: 20rpx;
							color: #9b2928;
							white-space: nowrap;
							padding: 4rpx 8rpx;
							&::after {
								content: '';
								display: block;
								width: 12rpx;
								height: 12rpx;
								background-color: #FFFFFF;
								transform: rotate(45deg) translateX(-50%);
								position: absolute;
								bottom: -13rpx;
								left: 50%;
								border-width: 1rpx;
								border-style: solid;
								border-color: transparent #f7cd67 #f7cd67 transparent;
							}
						}
						.avatar {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
							border: 2rpx solid #f7cd67;
							background-color: #FFFFFF;
						}
						.uName {
							position: absolute;
							bottom: -28rpx;
							left: 50%;
							transform: translateX(-50%);
							background-color: #f7cd67;
							border-radius: 40rpx;
							font-size: 28rpx;
							color: #333;
							padding: 0 20rpx;
							width: 100rpx;
							height: 46rpx;
							line-height: 46rpx;
						}
						&:nth-of-type(n + 5) {
							width: 33.33%;
						}
					}
					.not {
						width: 25%;
						position: relative;
						margin-bottom: 66rpx;
						.expected {
							position: absolute;
							top: -24rpx;
							left: 50%;
							transform: translateX(-50%);
							background-color: #FFFFFF;
							border: 1rpx solid #f7cd67;
							border-radius: 40rpx;
							font-size: 20rpx;
							color: #f7cd67;
							white-space: nowrap;
							padding: 4rpx 8rpx;
							&::after {
								content: '';
								display: block;
								width: 12rpx;
								height: 12rpx;
								background-color: #FFFFFF;
								transform: rotate(45deg) translateX(-50%);
								position: absolute;
								bottom: -13rpx;
								left: 50%;
								border-width: 1rpx;
								border-style: solid;
								border-color: transparent #f7cd67 #f7cd67 transparent;
							}
						}
						.avatar {
							display: inline-block;
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
							border: 2rpx solid #f7cd67;
							background-color: #FFFFFF;
							line-height: 90rpx;
						}
						.uName {
							position: absolute;
							bottom: -28rpx;
							left: 50%;
							transform: translateX(-50%);
							background-color: #f7cd67;
							border-radius: 40rpx;
							font-size: 28rpx;
							color: #FFFFFF;
							width: 100rpx;
							height: 46rpx;
							line-height: 46rpx;
						}
					}
				}
				.btnBox {
					position: relative;
					.btnMask {
						position: absolute;
						top: -70rpx;
						left: 50%;
						transform: translateX(-50%);
						color: #FFFFFF;
						font-size: 28rpx;
						white-space: nowrap;
						line-height: 60rpx;
						padding: 0 20rpx;
						background-color: rgba($color: #000000, $alpha: 0.5);
						border-radius: 8rpx;
						.icon {
							margin-left: 16rpx;
						}
						&::after {
							content: '';
							display: block;
							width: 2rpx;
							height: 2rpx;
							border-width: 8rpx;
							border-style: solid;
							border-color: transparent rgba($color: #000000, $alpha: 0.5) rgba($color: #000000, $alpha: 0.5) transparent;
							position: absolute;
							bottom: -13rpx;
							left: 50%;
							transform: rotate(45deg) translateX(-50%);
						}
					}
					.btn {
						background: linear-gradient(0deg, #ffe753, #f9be00);
						border-radius: 50rpx;
						margin: 0 60rpx;
						font-size: 32rpx;
						color: #9b2928;
						line-height: 80rpx;
						position: relative;
						.text {
							margin-left: 12rpx;
						}
					}
				}
			}
			
			.redImg {
				width: 650rpx;
				height: 860rpx;
				position: relative;
				z-index: 1;
			}
		}
	}
}

@keyframes btn {
    0% {
		transform: scale(1);
    }
	50% {
		transform: scale(1.2);
	}
    100% {
		transform: scale(1);
    }
}
</style>
